<template>
    <div>
        <div>
            <h4 class="font-weight-bold">深圳市联合利丰供应链管理有限公司</h4>
            <!-- <Form :label-width="80">
                <FormItem label="关键字：">
                    <Row>
                        <i-col span="9">
                            <i-input placeholder="请输入文件名包含的关键字"></i-input>
                        </i-col>
                    </Row>
                </FormItem>
                <FormItem label="时间：">
                    <Row>
                        <i-col span="4">
                            <DatePicker type="date" placeholder="开始时间"></DatePicker>
                        </i-col>
                        <i-col span="1" style="text-align: center">-</i-col>
                        <i-col span="4">
                            <DatePicker type="date" placeholder="结束时间"></DatePicker>
                        </i-col>
                        <i-col span="2">
                            <Button type="primary" class="ml-2" shape="circle" icon="ios-search">查询</Button>
                        </i-col>
                        <i-col span="2">
                            <Button type="info" class="ml-2" shape="circle" icon="refresh">获取报告</Button>
                        </i-col>
                    </Row>
                </FormItem>
            </Form> -->
        </div>

        <b-card no-body class="mb-4">
            <b-card-header header-tag="h6" class="with-elements pr-0 pb-0">
                <div class="card-header-title">最新报告文件</div>
                <div class="card-header-elements ml-md-auto mr-3">
                    <Button type="info" size="small" icon="ios-refresh-empty">重新获取</Button>
                </div>
            </b-card-header>
            <b-card-body>
                <Row>
                    <i-col span="12">
                        <label style="width:80px;" for="">文件名：</label>
                        <strong>
                            <u>
                                <a href="#">深圳市联合利丰供应链管理有限公司授信报告.pdf</a>
                            </u>
                        </strong>
                    </i-col>
                </Row>

                <Row>
                    <i-col span="6">
                        <label style="width:80px;" for="">文件大小：</label>
                        <span class="text-light">3342m</span>
                    </i-col>

                    <i-col span="6">
                        <label for="">缓存时间：</label>
                        <span class="text-light">2018-06-23</span>
                    </i-col>

                    <i-col span="6">
                        <label for="">来源：</label>
                        <span class="text-light">星象云</span>
                    </i-col>
                </Row>
                <!-- <p>
                    <label for="">文件名：</label><a href="#">联合利丰</a>
                </p>
                <p>
                    <label for="">文件大小：</label><span>3342m</span>
                </p> -->
            </b-card-body>
        </b-card>

        <sky-table :data="table.dataList" :columns="table.columns" :show-pagination="false" :show-index="table.showIndex"></sky-table>
    </div>
</template>


<style scoped>
.ivu-form-item {
    margin-bottom: 8px;
}
</style>

<script>
export default {
    name: "ReportRecord",
    data() {
        return {
            table: {
                columns: [
                    {
                        title: "文件名",
                        key: "fileName"
                    },
                    {
                        title: "大小",
                        key: "size",
                        align: "center"
                    },
                    {
                        title: "缓存时间",
                        key: "time",
                        align: "center"
                    },
                    {
                        title: "来源",
                        key: "orgin"
                    },
                    {
                        title: "操作",
                        align: "center",
                        render: (h, params) => {
                            let vm = this;
                            return (
                                <div>
                                    <i-button
                                        size="small"
                                        icon="android-arrow-down"
                                    >
                                        下载
                                    </i-button>
                                </div>
                            );
                        }
                    }
                ],
                dataList: [
                    {
                        fileName:
                            "大陆锐实力施压他国 蔡英文重申捍卫民主价值.pdf",
                        size: "100MB",
                        time: "2018-07-30",
                        orgin: "阿里云"
                    },
                    {
                        fileName: "广东分四个阶段开展集中整改.pdf",
                        size: "100MB",
                        time: "2018-07-30",
                        orgin: "阿里云"
                    },
                    {
                        fileName:
                            "说好的外销120吨香蕉呢？6月份台湾出口中东的香蕉仅23公吨.pdf",
                        size: "100MB",
                        time: "2018-07-30",
                        orgin: "阿里云"
                    }
                ]
            }
        };
    }
};
</script>

